import React from 'react';
import { Button, Card, Row, Col, Typography, Space, Statistic } from 'antd';
import { useNavigate } from 'react-router-dom';
import { 
  EnvironmentOutlined, 
  CalculatorOutlined, 
  TrophyOutlined, 
  TeamOutlined,
  ArrowRightOutlined
} from '@ant-design/icons';
import { motion } from 'framer-motion';
import { useUserStore } from '../store/userStore';

const { Title, Paragraph } = Typography;

const Home: React.FC = () => {
  const { user, getActivitySummary } = useUserStore();
  const summary = getActivitySummary();
  const navigate = useNavigate();

  // 计算最近7天的碳排放趋势
  const carbTrend = summary.recentActivity.slice(0, 7).reduce((total, activity) => total + activity.value, 0);
  
  // 根据碳足迹级别确定状态
  const getCarbonStatus = (footprint: number) => {
    if (footprint < 15) return { text: '优秀', color: '#4CAF50' };
    if (footprint < 30) return { text: '良好', color: '#8BC34A' };
    if (footprint < 45) return { text: '一般', color: '#FFC107' };
    if (footprint < 60) return { text: '较高', color: '#FF9800' };
    return { text: '过高', color: '#F44336' };
  };
  
  const carbonStatus = getCarbonStatus(user?.carbonFootprint || 0);
  
  // 环保建议
  const tips = [
    '短距离出行选择步行或骑自行车',
    '使用可重复使用的水杯和购物袋',
    '节约用水，洗澡时间控制在5-10分钟',
    '选择本地和季节性食品，减少食物里程',
    '减少肉类消费，尝试素食日',
    '不使用电器时拔掉插头，避免待机耗电'
  ];
  const randomTip = tips[Math.floor(Math.random() * tips.length)];

  const features = [
    {
      icon: <EnvironmentOutlined style={{ fontSize: '48px', color: '#1a5f7a' }} />,
      title: '个人星球',
      description: '创建并管理您的虚拟星球，直观地看到您的环保行动带来的改变。',
      action: () => navigate('/dashboard/planet')
    },
    {
      icon: <CalculatorOutlined style={{ fontSize: '48px', color: '#1a5f7a' }} />,
      title: '碳足迹计算',
      description: '通过简单的问卷了解您的碳足迹，获取个性化的减排建议。',
      action: () => navigate('/dashboard/calculator')
    },
    {
      icon: <TrophyOutlined style={{ fontSize: '48px', color: '#1a5f7a' }} />,
      title: '环保挑战',
      description: '参与有趣的环保挑战，赢取绿色能量，为您的星球带来改变。',
      action: () => navigate('/dashboard/challenges')
    },
    {
      icon: <TeamOutlined style={{ fontSize: '48px', color: '#1a5f7a' }} />,
      title: '社区任务',
      description: '加入环保社区，参与集体行动，共同为地球做出贡献。',
      action: () => navigate('/dashboard/tasks')
    }
  ];

  return (
    <div style={{ 
      minHeight: '100vh',
      background: 'linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%)',
      padding: '40px 20px'
    }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <Space direction="vertical" size="large" style={{ width: '100%' }}>
          {/* 头部区域 */}
          <div style={{ textAlign: 'center', marginBottom: '60px' }}>
            <Title level={1} style={{ color: '#1a5f7a', marginBottom: '20px' }}>
              绿色星球 - 您的个人环保助手
            </Title>
            <Paragraph style={{ fontSize: '18px', color: '#666' }}>
              通过互动的方式了解您的碳足迹，参与环保行动，为地球的未来贡献力量。
            </Paragraph>
            <Space size="large" style={{ marginTop: '20px' }}>
              <Button 
                type="primary" 
                size="large"
                onClick={() => navigate('/login')}
                style={{ 
                  background: '#1a5f7a',
                  borderColor: '#1a5f7a',
                  height: '40px'
                }}
              >
                开始使用
              </Button>
              <Button 
                size="large"
                onClick={() => navigate('/register')}
                style={{ height: '40px' }}
              >
                注册账号
              </Button>
            </Space>
          </div>

          {/* 数据统计 */}
          <Row gutter={[16, 16]} style={{ marginBottom: '60px' }}>
            <Col xs={24} sm={12} md={6}>
              <Card>
                <Statistic
                  title="活跃用户"
                  value={1234}
                  prefix={<TeamOutlined />}
                />
              </Card>
            </Col>
            <Col xs={24} sm={12} md={6}>
              <Card>
                <Statistic
                  title="累计减排"
                  value={5678}
                  suffix="kg CO₂"
                  prefix={<EnvironmentOutlined />}
                />
              </Card>
            </Col>
            <Col xs={24} sm={12} md={6}>
              <Card>
                <Statistic
                  title="完成挑战"
                  value={890}
                  prefix={<TrophyOutlined />}
                />
              </Card>
            </Col>
            <Col xs={24} sm={12} md={6}>
              <Card>
                <Statistic
                  title="种植树木"
                  value={123}
                  prefix={<CalculatorOutlined />}
                />
              </Card>
            </Col>
          </Row>

          {/* 功能特性 */}
          <Title level={2} style={{ textAlign: 'center', marginBottom: '40px' }}>
            主要功能
          </Title>
          <Row gutter={[24, 24]}>
            {features.map((feature, index) => (
              <Col xs={24} sm={12} md={6} key={index}>
                <Card 
                  hoverable
                  style={{ height: '100%' }}
                  onClick={feature.action}
                >
                  <Space direction="vertical" size="middle" style={{ width: '100%' }}>
                    <div style={{ textAlign: 'center' }}>
                      {feature.icon}
                    </div>
                    <Title level={4} style={{ textAlign: 'center', margin: 0 }}>
                      {feature.title}
                    </Title>
                    <Paragraph style={{ textAlign: 'center', color: '#666' }}>
                      {feature.description}
                    </Paragraph>
                    <Button 
                      type="link" 
                      icon={<ArrowRightOutlined />}
                      style={{ 
                        color: '#1a5f7a',
                        padding: 0,
                        height: 'auto'
                      }}
                    >
                      了解更多
                    </Button>
                  </Space>
                </Card>
              </Col>
            ))}
          </Row>

          {/* 底部区域 */}
          <div style={{ 
            textAlign: 'center', 
            marginTop: '60px',
            padding: '40px',
            background: 'rgba(255,255,255,0.8)',
            borderRadius: '12px'
          }}>
            <Title level={3} style={{ color: '#1a5f7a' }}>
              准备好开始您的环保之旅了吗？
            </Title>
            <Paragraph style={{ fontSize: '16px', color: '#666' }}>
              加入我们，一起为地球的未来贡献力量
            </Paragraph>
            <Button 
              type="primary"
              size="large"
              onClick={() => navigate('/register')}
              style={{ 
                background: '#1a5f7a',
                borderColor: '#1a5f7a',
                height: '40px'
              }}
            >
              立即注册
            </Button>
          </div>
        </Space>
      </div>
    </div>
  );
};

export default Home; 